import React, { useState } from 'react';

import { DownOutlined,ApartmentOutlined,SearchOutlined,MehOutlined,FrownFilled,FrownOutlined} from '@ant-design/icons';
import cloneDeep from 'lodash.clonedeep';
import { Table, Input , Col, Row, Button ,Tree,Modal,Menu } from 'antd';
const { Search } = Input;
import styles from './style.less'
export type MapProps = {
    style?: React.CSSProperties
};

const SelectArea: React.FC<MapProps> = (props) => {

    const { style } = props
    const treeData = [
      {
        title: 'parent 1',
        key: '0-0',
        icon: <ApartmentOutlined  />,
        children: [
          {
            title: 'leaf',
            key: '0-0-0',
            icon: <MehOutlined />,
          },
          {
            title: 'leaf',
            key: '0-0-1',
            icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),
          },
        ],
      },
    ];
    const selectDataSource = [
        {
          projectName: 'projectName',
          projectAddress:'projectAddress',
         
        },{
          projectName: 'projectName',
          projectAddress:'projectAddress',
         
        },{
          projectName: 'projectName',
          projectAddress:'projectAddress',
         
        }
      ];
      const selectColumns = [
        {
          title: '项目名称',
          dataIndex: 'projectName'
        },
        {
          title: '项目地址',
          dataIndex: 'projectAddress',
        }
      ];

      const handleCancel = () => {
        setIsModalVisible(false);
      };
      const showModal = () => {
        setIsModalVisible(true);
      };
      const handleClick = (e) => {
        console.log('click ', e);
        setCurrent(e.key)
      
      };
      const handleOk = () => {
        setIsModalVisible(false);
      };
        const onSearch = (val) => {
        console.log('search:', val);
      }
      function onTreeSelect(selectedKeys, info){
        console.log('selected', selectedKeys, info);
        const newSelectData = cloneDeep(selectData); 
        newSelectData.push( {
            projectName: 'projectName1',
            projectAddress:'projectAddress1',
           
          });
          console.log(selectData)
          setSelectData(newSelectData);
          console.log(selectData)
      }

      const [isModalVisible, setIsModalVisible] = useState(false);
      const [selectData, setSelectData] = useState(selectDataSource);
      const [current, setCurrent] = useState("1");
    return (
        <>
        <div  className={styles.projectTitle}>
              <h1>全部区域</h1>
              <span onClick={showModal}  className={styles.right} >切换区域</span>
            </div>
            <div  className={styles.search} >
             {/* <Search placeholder="" onSearch={onSearch} enterButton={
              <Button style={{      background: '#242e3d'}}><SearchOutlined /></Button>
            } />  */}
              <div style={{    backgroundColor: '#40a9ff',borderRadius: '3px'}}>
                <Input bordered={false} size="large" className={styles.inputBg} suffix={ <SearchOutlined onClick={onSearch}  style={{    fontSize: '20px'}}/> }
                />
              </div>
            </div>
            <div  >  
              <Menu style={{border:0}}  onClick={handleClick}  selectedKeys={[current]}>
                  <Menu.Item key="1" style={{borderTop:0}} className={current=="1"?styles.menuSelected:''} >智能马达</Menu.Item>
                  <Menu.Item  key="2" style={{borderTop:0}}  className={current=="2"?styles.menuSelected:''}>设备名称</Menu.Item>
                  <Menu.Item  key="3" style={{borderTop:0}}  className={current=="3"?styles.menuSelected:''}>设备名称</Menu.Item>
                  <Menu.Item  key="4" style={{borderTop:0}}  className={current=="4"?styles.menuSelected:''}>设备名称</Menu.Item>
               
              </Menu>
            </div>
                <Modal title="切换项目"   width={1060} style={{backgroundColor: '#1b2535'}} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Row gutter={24} > 
                  <Col xl={6} lg={6} md={6} sm={6} xs={6} style={{  borderRight: '1px solid #355fb8' }}>
                    <div  className={styles.search} >  
                      <Search placeholder="" onSearch={onSearch} enterButton={ <Button style={{      background: '#242e3d'}}><SearchOutlined /></Button>} />   
                     
                   
                   
                    </div>
                    <div>  
                     <Tree
                        showIcon
                        blockNode
                        defaultExpandAll
                        defaultSelectedKeys={['0-0-0']}
                        switcherIcon={<DownOutlined />}
                        treeData={treeData}
                        onSelect={onTreeSelect}
                      /> 
                    </div>
                  </Col>
                  <Col xl={18} lg={18} md={18} sm={18} xs={18} >
                    <Search   className={styles.search} placeholder="项目名称" onSearch={onSearch} style={{ width: '100%' }}
                      enterButton={
                        <Button style={{      background: '#242e3d'}}><SearchOutlined /></Button>}
                    />
                    <Table dataSource={selectData} columns={selectColumns} 
                      onRow={record => {return {onClick:handleCancel} }}/>
                  </Col>
                </Row>
              </Modal>
        </>
    );

};

export default SelectArea;